import QtQuick
import QtQuick.Window
import QtQuick.Controls

ApplicationWindow {
  id: root
  visible: true
  width: 1280
  height: 800
  title: "Login UI"
  flags: Qt.FramelessWindowHint
  color: "#00000000" // 背景透明
  // 声明变量
  property int dragX: 0
  property int dragY: 0
  property bool isDragging: false
  Rectangle {
    MouseArea {
      // 上面 100 像素区域可拖动
      width: parent.width
      height: 100
      onPressed: {
        // 鼠标按下时记录鼠标坐标
        root.dragX = mouseX;
        root.dragY = mouseY;
        root.isDragging = true;
      }
      onReleased: root.isDragging = false
      onPositionChanged: {
        if (root.isDragging) {
          root.x += mouseX - root.dragX;
          root.y += mouseY - root.dragY;
        }
      }
    }
    width: parent.width
    height: parent.height
    radius: 15
    gradient: Gradient {
      GradientStop {
        position: 0.0
        color: "red"
      }
      GradientStop {
        position: 0.33
        color: "yellow"
      }
      GradientStop {
        position: 1.0
        color: "green"
      }
    }
    Rectangle {
      width: 800
      height: 500
      anchors.centerIn: parent
      radius: 10
      Image {
        x: 73
        y: 120
        // 前缀: qrc:/images
        // 相对于 qml.qrc 的图片路径: images/登陆.png
        source: "qrc:/images/images/登陆.png"
      }
      Text {
        text: "登陆系统"
        x: 530
        y: 130
        width: 120
        height: 30
        font.pixelSize: 24
        color: "#333333"
      }
      TextField {
        id: username
        x: 430
        y: 200
        width: 300
        height: 30
        font.pixelSize: 20
        leftPadding: 60
        // 占位字符串
        placeholderText: "用户名或邮箱"
        placeholderTextColor: "#999999"
        color: "#666666"
        // 圆角需要通过背景来设置
        background: Rectangle {
          color: "#e6e6e6"
          radius: 15
        }
        Image {
          source: username.activeFocus ? "qrc:/images/./images/账号2.png" : "qrc:/images/./images/账号.png"
          width: 20
          height: 20
          x: 10
          y: 6
        }
        NumberAnimation on x {
          from: username.x - 100
          to: username.x
          duration: 300
        }
      }
      TextField {
        id: password
        x: username.x
        y: username.y + username.height + 10
        width: username.width
        height: username.height
        font: username.font
        leftPadding: username.leftPadding
        echoMode: TextInput.Password
        placeholderText: "密码"
        placeholderTextColor: username.placeholderTextColor//"#999999"
        color: username.color//"#666666"
        // 圆角需要通过背景来设置
        background: Rectangle {
          color: "#e6e6e6"
          radius: 15
        }
        Image {
          source: password.activeFocus ? "qrc:/images/./images/登陆密码2.png" : "qrc:/images/./images/登陆密码.png"
          width: 20
          height: 20
          x: 10
          y: 6
        }
      }
      Button {
        id: submit
        x: username.x
        y: password.y + password.height + 10
        width: username.width
        height: username.height
        text: "登录"
        font.pixelSize: 24
        // 圆角需要通过背景来设置
        background: Rectangle {
          radius: 15
          color: {
            if (submit.down)
              return "red";
            if (submit.hovered)
              return "#c3ce00";
            return "#00c3c3";
          }
        }
        onClicked: {
          print("登录: " + username.text + " " + password.text);
        }
      }
    }
    // 自定义关闭按钮
    Rectangle {
      width: 30
      height: 30
      x: root.width - 35
      y: 5
      color: "#c3c3c3"
      radius: 10
      Image {
        width: parent.width
        height: parent.height
        source: "qrc:/images/./images/关闭.png"
        anchors.centerIn: parent
      }
      MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
          parent.color = "#c300c3";
        }
        onExited: parent.color = "#c3c3c3"
        onPressed: {
          parent.color = "#333333";
        }
        onClicked: {
          root.close();
        }
      }
    }
  }
}
